<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>熊猫</title>
</head>
<body>
<div>
  <span class='left-ear'></span>
  <span class='right-ear'></span>
  <span class='left-orbit'></span>
  <span class='right-orbit'></span>
  <span class='cheek'></span>
  <span class='nose'></span>
  <span class='mouth'></span>
  <span class='left-cochlea'></span>
  <span class='right-cochlea'></span>
  <span class='left-eye'></span>
  <span class='right-eye'></span>
  <span class='right-eye-white'></span>
  <span class='left-eye-white'></span>
  <span class='nose-white'></span>
  <span class='face'></span>
</div>

</body>
</html>
<style>
  div{
    width:300px;
    height:300px;
    margin:50px;
    padding:10px;
  }
  .left-ear,.right-ear{float:left;width:102px;border:1px solid black;background:#140303;height:120px;border-radius:50%;}
  .right-ear{float:right;}
  .left-orbit,.right-orbit{float:left;border:1px solid black;background:black;width:90px;height:72px;margin:26px 29px;border-radius:144% 35% 144% 35%;}
  .right-orbit{border-radius:35% 144% 35% 144%;}
  .cheek{float:left;width:200px;height:110px;margin: -52px 0 0 48px;border-radius:50%;border:1px solid black;background:white;}
  .nose{float:left;width:80px;height:50px;margin: -122px 0 0 108px;border-radius:90% 90% 100% 100%;border:1px solid black;background:#680200;}
  .mouth{float:left;width:35px;height:20px;margin: -54px 0 0 128px;border-radius:50%;border:1px solid black;background:red;}
  .left-cochlea,.right-cochlea{float:left;width:50px;height:50px;margin: -250px 0 0 36px;border-radius:50%;border:1px solid black;background:pink;}
  .right-cochlea{
    margin: -250px 0 0 212px;
  }
  .left-eye,.right-eye{float:left;width:20px;height:20px;margin: -152px 0 0 82px;border-radius:50%;border:1px solid white;background:black;}
  .right-eye{
    margin: -152px 0 0 183px;
  }
  .right-eye-white,.left-eye-white{
    float:left;
    width:10px;
    height:10px;
    margin: -152px 0 0 185px;
    border-radius:50%;
    border:1px solid black;
    background:white;
  }
  .left-eye-white{
    margin: -152px 0 0 90px;
  }
  .nose-white{
    float:left;
    width:35px;
    height:13px;
    margin: -119px 0 0 113px;
    border-radius:100% 34% 100% 50%;
    border:1px solid black;
    background:white;
  }
  .face{
    display:block;
    margin-top:25px;
    width:300px;
    height:275px;
    border-radius:50% 50% 35% 35%;
    border:1px solid black;
    background:white;
  }
  div:after{
    display:block;
    content:'';
    clear:both;
  }
</style>
